<template>
  <div class="app">
    <nav class="top-nav" v-show="!isSearching">
      <div>
        <router-link to="/" class="nav-item">主页</router-link>
      </div>
      <div>
        <router-link to="/person" class="nav-item">频道</router-link>
      </div>
      <div>
        <router-link to="/my" class="nav-item">我的</router-link>
      </div>
      <button class="nav-item" @click="handleSearch">搜索</button>
    </nav>
    <div class="content" v-show="!isSearching">
      <router-view></router-view>
    </div>
    <div class="top-nav" v-show="isSearching">
      <div class="search-container">
        <div class="search-box">
          <div class="searchcontainer">
            <input type="text" placeholder="搜索影片" class="search" v-model="movieTitle">
            <button class="btnsearch" @click="searchMovie">搜索</button>
            <button @click="resetAndReturnToNav" class="btnsearch">取消</button>
          </div>
          <div class="select-box">
            <Dropdown :options="categoryOptions" v-model="movieFilter" id="movieFilter" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Dropdown from '../components/Dropdown.vue'
import { ref } from "vue";

export default {
  components: { Dropdown },
  data() {
    return {
      isSearching: false,
      movieTitle: "",
      movieFilter: "all",
      sortOrder: "default",
      categoryOptions: [
        { value: "all", label: "全部" },
        { value: "movie", label: "电影" },
        { value: "tv", label: "电视剧" },
        { value: "variety", label: "综艺" },
      ],
    };
  },
  methods: {
    resetAndReturnToNav() {
      this.reset();
      this.isSearching = false;
    },
    reset() {
      this.movieTitle = "";
      this.movieFilter = "all";
      this.sortOrder = "default";
    },
    handleSearch() {
      console.log("触发搜索操作");
      this.isSearching = true;
    },
    searchMovie() {
      console.log("Searching for movie:", this.movieTitle, "in category:", this.movieFilter);

    },
  },
};
</script>

<style scoped>
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #4a90e2;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  z-index: 10;
}

.nav-item {
  font-weight: bold;
  text-decoration: none;
  color: inherit;
  margin-right: 10px;
  padding: 5px 30px;
  display: inline-flex;
}

.content {
  padding-top: 60px;
}

button.nav-item {
  border: none;
  background: none;
  cursor: pointer;
}

.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-box {
  margin-left: 100px;
  display: flex;
  align-items: center;
  object-fit: cover;
}

.select-box {
  margin-left: 10px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  color: #fff;
  margin-top: auto;
}

.select-box label {
  margin-right: 5px;
}

.select-box select {
  margin-right: 10px;
}

.searchcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search {
  width: 430px;
  height: 45px;
  background-image: url(搜索.png);
  background-repeat: no-repeat;
  border-radius: 30px;
  padding-left: 50px;
  background-position: 10px 10px;
  color: #4a4a4a;
  font-size: 18px;
  border: none;
}

.btnsearch {
  width: 90px;
  height: 47px;
  border: none;
  background-color: #4a90e2;
  color: #ffffff;
  border-radius: 20px;
  font-size: 20px;
  cursor: pointer;
}

.btnsearch:hover {
  background-color: #3c7dbf;
}
</style>
